<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>站点配置</span>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="120px"
      status-icon
    >
      <el-form-item label="favicon">
        <ImageUploadNew
          :limit="1"
          :modelValue="iconModelValueList"
          @update:modelValue="webFavicon"
        />
      </el-form-item>
      <el-form-item label="网站标题">
        <el-input
          maxlength="20"
          style="width: 200px"
          v-model.trim="ruleForm.webTitle"
          show-word-limit
          placeholder="请输入网站标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="logo">
        <div class="logo">
          <ImageUploadNew
            :limit="1"
            :modelValue="logoModelValueList"
            @update:modelValue="webLogo"
          >
          </ImageUploadNew>
        </div>
      </el-form-item>
      <el-form-item label="菜单缩小logo">
        <ImageUploadNew
          :limit="1"
          :modelValue="iconModelValueList"
          @update:modelValue="websmallLog"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="save"
          style="width: 200px; height: 40px"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { getWebInfoReq, editWebInfoReq } from '@/api/platform/site.js';

const ruleForm = reactive({
  id: '0', //参数0 表示新增，其他为修改
  storeid: '0', //固定值 0
  webTitle: '',
  webFavicon: '',
  webLogo: '',
  websmallLog: '',
});

const iconModelValueList = ref([]);
const logoModelValueList = ref([]);
const smalllogoModelValueList = ref([]);

// webLogo
const webLogo = (val) => {
  ruleForm.webLogo = val;
};

// webFavicon
const webFavicon = (val) => {
  ruleForm.webFavicon = val;
};
// websmallLog
const websmallLog = (val) => {
  ruleForm.websmallLog = val;
};

// 查询
const getWebInfo = () => {
  getWebInfoReq().then(
    ({ data: { id, webTitle, webFavicon, webLogo, websmallLog } }) => {
      ruleForm.id = id;
      ruleForm.webTitle = webTitle;
      ruleForm.webFavicon = webFavicon;
      ruleForm.webLogo = webLogo;
      ruleForm.websmallLog = websmallLog;
      iconModelValueList.value = ruleForm.webFavicon && [ruleForm.webFavicon];
      logoModelValueList.value = ruleForm.webLogo && [ruleForm.webLogo];
      smalllogoModelValueList.value = ruleForm.websmallLog && [
        ruleForm.websmallLog,
      ];
    }
  );
};
getWebInfo();

// 保存
const save = () => {
  editWebInfoReq({ ...ruleForm }).then(({ code }) => {
    if (code === 20000) {
      proxy.$modal.msgSuccess(ruleForm.id === '0' ? '新增成功' : '修改成功');
    }
  });
};
</script>
<style lang="scss" scoped>
::v-deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

::v-deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;

    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}

:deep(.el-form-item) {
  margin: 10px 0;
}

::v-deep(.el-upload--picture-card) {
  width: 70px;
  height: 70px;
}

::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 70px;
  height: 70px;
}

::v-deep(.logo) {
  .el-upload-list--picture-card .el-upload-list__item {
    width: 200px;
    height: 70px;
  }
}
</style>
